<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详情页</title>
    <link rel="stylesheet" href="../sass/header.css">
    <link rel="stylesheet" href="../sass/detail.css">
    <link rel="stylesheet" href="../css/swiper-bundle.min.css">
</head>
<style>
    .a{margin-top: -30px;margin-right: 20px;position: relative;}
    
</style>
<body>
    <!-- 头部 -->
    <div id="detail-header"></div>
    <div class="login right">
        <a href="../pages/login.html">登录 </a>/
        <a href="../pages/regies.html">注册</a>
    </div>
    <a href="../pages/cart.html" class="a right">进入购物车</a>
    <!-- 首页 -->
    <div id="detail-line">
        <div class="container">
            <a href="../pages/index.html">首页</a>
        </div>
    </div>
    <!-- 详情 -->
    <div id="detail-content" class="container">
        <!-- 轮播和商品介绍 -->
        <div class="detail-top-left">
            <!-- 轮播 -->
            <div class="detail-swiper swiper-container">
                <div class="swiper-wrapper">
                    <img src=" " class="wrapper swiper-slide">
                </div>
                <!-- 放大镜之小镜 -->
                <div class="small-box"></div>
                <!-- 分页器 -->
                <div class="swiper-pagination"  style="pointer-events: none;"></div>
                <!-- 导航按钮 -->
                <div class="swiper-button-prev " style="pointer-events: none;"></div>
                <div class="swiper-button-next" style="pointer-events: none;"></div>
            </div>
            <!-- 放大镜之大静 -->
            <div class="big-box">
                <img src="" alt=""  class="big-pic">
            </div>
            <!-- 介绍  价格 -->
            <div class="detail-reduce  right">
                <h1>
                    <div class="detail-icon">
                        <img src="../lib/img/tao.png" alt="" class="icon1"  >
                        <img src="../lib/img/包邮2.png" alt="" class="icon2">
                    </div>
                    <span></span>
                </h1>
                <!-- 原价  现价 -->
                <div class="prev-price">
                    <p class="prev-oldPrice">
                        <i>原价￥10.1</i>
                    </p>
                    <div class="new-price">
                        <span class="new-price-span">券后价：</span>
                        <span class="new-price-span2">
                            <i style="font-size: 20px; font-style: normal;">￥</i>
                            7.
                            <span style="font-size: 28px;">1</span>
                            <span class="juan">3元劵</span>
                            <span class="people-num  right">365人已买</span>
                        </span>
                    </div>
                </div>
                <!-- 优惠截止日期 -->
                <p class="youhui  right">
                    优惠有效期：2021-11-16
                </p>
                <button type="button" class="add-btn  right">加入购物车</button>
            </div>
        </div>
        <!-- 卖家信息 -->
        <div class="detail-top-right  right">
            <div class="shop-info">
                <span class="shop-line"></span>
                <span class="shop-text">卖家信息</span>
                <span class="shop-line"></span>
            </div>
            <img src="../lib/img/旺旺.png" alt="" class="shop-img">
            <p class="shop-name">王一博和我的店</p>
            <div class="shop-pinglun">
                <ul class="shop-wuliu">
                    <li>描述</li>
                    <li>服务</li>
                    <li>物流</li>
                </ul>
                <ul class="shop-score">
                    <li>4.8</li>
                    <li>4.8</li>
                    <li>4.8</li>
                </ul>
            </div>
        </div>
        <!-- 下边商品图片 -->
        <div class="detail-bottom">
            <div class="detail-bottom-img">
                <img src="../lib/img/美妆蛋.jpg" alt="">
            </div>
        </div>
    </div>
    <!-- 尾部 -->
    <div id="detail-foot"></div>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/swiper-bundle.min.js"></script>
    <script src="../js/detail.js"></script>
</body>
</html>